<template>
  <Layout description="vue server side render" keywords="egg, vue, webpack, server side render">
    <div class="container smart-container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          <ul class="smart-artiles" id="articleList">
            <li v-for="item in list">
              <div class="point">+{{item.hits}}</div>
              <div class="card">
                <h2><a :href="item.url" target="_blank">{{item.title}}</a></h2>
                <div>
                  <ul class="actions">
                    <li>
                      <time class="timeago">{{item.moduleName}}</time>
                    </li>
                    <li class="tauthor">
                      <a href="#" target="_blank" class="get">Sky</a>
                    </li>
                    <li><a>+收藏</a></li>
                    <li>
                      <span class="timeago">{{item.summary}}</span>
                    </li>
                    <li>
                      <span class="timeago"></span>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
          <div id="pagerBottom" class="smart-pager" v-if="isLoading">
            <img src="../../../asset/images/loading.gif">
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<style>
  @import "index.css";
</style>
<script type="text/babel">
  export default {
    components: {},
    data(){
      return {
        list:[],
        isFinish: false,
        isLoading: false,
        pageIndex: 1,
        pageSize: 10
      }
    },
    computed: {
      lists(){
        return this.list;
      }
    },
    methods: {
      fetch(){
        this.$http.get(`${location.origin}/pager?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`).then(res=> {
          if (res.data.list && res.data.list.length) {
            this.total = res.data.total;
            this.list = this.list.concat(res.data.list);
            console.log(this.list);
          } else {
            this.isFinish = true;
          }
          this.isLoading = false;
        });
      },
      loadPage(){
        if (!this.isFinish && !this.isLoading) {
          this.isLoading = true;
          this.pageIndex++;
          setTimeout(()=> {
            this.fetch();
          }, 1500);
        }
      }
    },
    mounted() {
      this.fetch();
      window.addEventListener('scroll', ()=> {
        this.loadPage();
      }, false);
    }
  }
</script>

